<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			<el-container>
				<!--  1.头部 : 第一行内容 -->
				<el-header style="background-color: #0095d7;">
					<h1 style="color: white; font-size: 22px;">
						CoolShark商城后台管理系统
						<span style="float: right; font-size: 15px;">欢迎XXX回来
							<a href="#">退出登录</a>
						</span>
					</h1>
				</el-header>
				<!--  中间第二行内容  -->
				<el-container>
					<!--  2.第二行左侧(导航菜单)  -->
					<el-aside width="200px">
						<el-menu
						  style="height: 500px;"
						  default-active="2"
						  @select="handleSelect"
						  class="el-menu-vertical-demo">
						    <el-submenu index="1">
								<!--  通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定  -->
								<template slot="title">
									<i class="el-icon-s-flag"></i>
									<span>分类管理</span>
								</template>
								<el-menu-item index="1-1">分类列表</el-menu-item>
								<el-menu-item index="1-2">添加分类</el-menu-item>
						    </el-submenu>
						    <el-submenu index="2">
						    	<template slot="title">
						    		<i class="el-icon-picture"></i>
						    		<span>轮播图管理</span>
						    	</template>
						    	<el-menu-item index="2-1">轮播图列表</el-menu-item>
						    	<el-menu-item index="2-2">添加轮播图</el-menu-item>
						    </el-submenu>
						    <el-submenu index="3">
						    	<template slot="title">
						    		<i class="el-icon-shopping-cart-full"></i>
						    		<span>商品管理</span>
						    	</template>
						    	<el-menu-item index="3-1">商品列表</el-menu-item>
						    	<el-menu-item index="3-2">添加商品</el-menu-item>
						    </el-submenu>
						  
						</el-menu>
					</el-aside>
					
					<!--  3.第二行右侧  -->
					<!--  3.1.类别列表  -->
					<el-main>
						<!--  v-if指令结果如果是false则设置隐藏是将DOM元素整个删除，此时DOM元素不再存在。  -->
						<el-table
							v-if="currentIndex=='1-1'"
						    :data="categoryArr"
						    style="width: 100%">
							<!--   type="index"设置这一列的内容为编号  -->
						    <el-table-column type="index" label="编号"></el-table-column>
							<!--当el-table元素中注入绑定data对象数组后，在el-table-column中的prop属性来绑定对应对象中的键名即可填入数据，用label属性则可以用来定义表格相应的列名。-->
						    <el-table-column prop="name" label="分类名称" width="180">
						    </el-table-column>
						    <el-table-column label="操作">
								<!--  slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可。
								(用:data="categoryArr"对data属性绑定categoryArr数组后，这里的slot-scope="scope"可以简单认为是数组的一个元素)。
								 在scope.row语句中，row 是 scope 的内置属性，应该还会有column, $index 等内置属性；(用来获取数组元素内的某个值)-->
								<!--scope.row代表当前行  对应数组中的  某个元素-->
								<!--scope里面装着当前行所对应的对象信息
									  scope.$index 得到当前行对应的对象在数组中的下标
									  scope.row 得到当前行对应的对象-->	
								<template slot-scope="scope">
									<el-button
									size="mini"
									type="danger"
									@click="handleDelete(scope.$index, categoryArr)">删除</el-button>
								</template>
						    </el-table-column>
						</el-table>
						  
						  
						<!--  3.2.轮播图列表  -->
						<!--  v-if指令结果如果是false则设置隐藏是将DOM元素整个删除，此时DOM元素不再存在。  -->
						<el-table
						  	v-if="currentIndex=='2-1'"
						      :data="bannerArr"
						      style="width: 100%">
							  <!--   type="index"设置这一列的内容为编号  -->
						      <el-table-column type="index" label="编号"></el-table-column>
						      <el-table-column label="轮播图" width="180">
								  <!--  slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可。 
								  (用:data="bannerArr"对data属性绑定bannerArr数组后，这里的slot-scope="scope"可以简单认为是数组的一个元素)。
									在scope.row语句中，row 是 scope 的内置属性，应该还会有column, $index 等内置属性；(用来获取数组元素内的某个值)-->
								  <!--自定义内容必须写在template里面-->
								  <template slot-scope="scope">
									  <!--scope.row代表当前行  对应数组中的  某个元素-->
									  <!--scope里面装着当前行所对应的对象信息
									  	  scope.$index 得到当前行对应的对象在数组中的下标
									  	  scope.row 得到当前行对应的对象-->	
									  <img :src="scope.row.url" width="100%"/>
								  </template>
						      </el-table-column>
						      <el-table-column label="操作">
						        <template slot-scope="scope">
						          <el-button
						            size="mini"
						            type="danger"
						            @click="handleDelete(scope.$index, bannerArr)">删除</el-button>
						        </template>
						      </el-table-column>
						</el-table>
							
						
						<!--  3.3.商品列表  -->	
						<el-table
							v-if="currentIndex=='3-1'"
							:data="productArr"
							style="width: 100%">
							<!--   type="index"设置这一列的内容为编号  -->
							<el-table-column type="index" label="编号"></el-table-column>
							<!--当el-table元素中注入绑定data对象数组后(:data)，在el-table-column中的prop属性来绑定对应对象中的键名即可填入数据，用label属性则可以用来定义表格相应的列名。-->
							<el-table-column prop="title" label="商品标题" width="200"></el-table-column>
							<el-table-column prop="price" label="价格" width="80"></el-table-column>
							<el-table-column prop="oldPrice" label="原价" width="80"></el-table-column>
							<el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
							<el-table-column label="商品图片" width="100">
								<!--  slot-scope="scope"本质上就是一个插槽，简单说就是先在 el-table 中占一个位置，然后再等待操作往里面填值即可。 
								(用:data="productArr"对data属性绑定productArr数组后，这里的slot-scope="scope"可以简单认为是数组的一个元素)。
									在scope.row语句中，row 是 scope 的内置属性，应该还会有column, $index 等内置属性；(用来获取数组元素内的某个值)-->
								<template slot-scope="scope">
									<!--scope.row代表当前行  对应数组中的  某个元素-->
									<img :src="scope.row.url" width="100%"/>
								</template>
							</el-table-column>
							<el-table-column label="操作">
							    <!--scope里面装着当前行所对应的对象信息
									  scope.$index 得到当前行对应的对象在数组中的下标
									  scope.row 得到当前行对应的对象-->	
							    <template slot-scope="scope">
								    <el-button
										size="mini"
										type="danger"
										@click="handleDelete(scope.$index, productArr)">删除</el-button>
									</el-button>
							    </template>
							</el-table-column>
						</el-table>
						  
						  
					</el-main>
				</el-container>
			</el-container>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el:"#app",
			data:{
				currentIndex: "1-1",
				categoryArr:[
					{name:"品牌服装"},
                    {name:"数码科技"},
					{name:"美食健康"},
					{name:"护肤产品"},
				],
				bannerArr:[
					{url:"imgs/b1.jpg"},
					{url:"imgs/b2.jpg"},
					{url:"imgs/b3.jpg"}
				],
				productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
				            {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
				            {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
				            {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342}
				]
			},
			methods:{
				handleDelete(index,rows){
					//v.productArr.splice(index,1);
					rows.splice(index,1);
				},
				handleSelect(key,keyPath){
					if(key=='1-2'){
						v.$message("添加分类");
					}else if(key=='2-2'){
						v.$message("添加轮播图");
					}else if(key=='3-2'){
						v.$message("添加商品");
					}else{
						v.currentIndex=key;
					}
				}
			}
		});
	</script>
</html>
